<template>
  <div class="loginpage">
      <a-layout style="background: #fff;">
        <!-- header -->
        <!-- <a-layout-header class="header">
          <a-row class="box">
            <a-col :span="14" class="lpic">
              <a-row class="pho">
                <img src="~@/assets/img/logo.png" class="im" alt=""/>
              </a-row>
            </a-col>
            <a-col :span="10" class="rnav">
              <a-menu mode="horizontal" v-model="current" class="menu">
                <a-menu-item key="home">Home</a-menu-item>
                <a-menu-item key="my">
                  <a :href="links" target="_blank" rel="noopener noreferrer">My Real Estate</a>
                </a-menu-item>
              </a-menu>
            </a-col>
          </a-row>
        </a-layout-header> -->

        <!-- content -->  
        <a-layout-content class="mainContent">
          <a-row class="box">
            <!-- 左 表单 -->
            <a-col :span="11" class="infomation">
              <a-row class="info-content">
                <!-- logo -->
                <div class="logos">
                  <img src="~@/assets/img/logo.png" alt=""/>
                </div>
                <!-- form -->
                <a-form class="formbox" status-icon :form="form" @submit="dataFormSubmit">
                  <!-- 姓名 -->
                  <a-form-item class="formItem">
                    <a-row class="text">Email</a-row>
                    <a-input
                      v-decorator="['loginname', { rules: [{ required: true, message: 'Account cannot be empty' }] }]"
                      class="ipt"
                    />
                  </a-form-item>

                  <!-- 密码 -->
                  <a-form-item class="formItem">
                    <a-row class="text">Password</a-row>
                    <a-input
                      v-decorator="['password', { rules: [{ required: true, message: 'Password cannot be empty' }] }]"
                      class="ipt"
                      type="password"
                    />
                  </a-form-item>

                  <!-- 验证码 -->
                  <a-form-item class="formItem yzmItem">
                    <a-row class="text">Captcha</a-row>
                    <el-row :gutter="20">
                      <el-col :span="16">
                        <a-input style="width:100%"
                          v-decorator="['captcha', { rules: [{ required: true, message: 'Verification code cannot be empty' }] }]"
                          class="ipt"
                        />
                      </el-col>
                      <el-col :span="8" class="login-captcha">
                        <img style="width:100%" :src="captchaPath" @click="getCaptcha()" class="pic" alt="">
                      </el-col>
                    </el-row>
                  </a-form-item>

                  <!-- 确认 -->
                  <a-form-item class="formItem">
                    <a-button class="login-btn-submit" type="primary" html-type="submit">Log In</a-button>
                  </a-form-item>
                </a-form>
                <!-- 版权 -->
                <div class="rights">
                  <p class="pi">© 2019 Real Estate Website by DotCom Agents </p>
                  <p class="pi">All rights reserved. Privacy and Terms</p>
                </div>
              </a-row>
            </a-col>

            <!-- 右 图 -->
            <a-col :span="13" class="picture">
              <a-row class="pho"></a-row>
            </a-col>
          </a-row>
        </a-layout-content>

        <!-- footer -->
        <!-- <a-layout-footer>Footer</a-layout-footer> -->
      </a-layout>
  </div>
</template>

<script>
  import { getUUID } from '@/utils'
  export default {
    data () {
      return {
        form: this.$form.createForm(this, { name: 'userForm' }),
        dataForm: {
          uuid: ''
        },
        captchaPath: '',
        current: ['home'],
        links: 'http://responsivemarketingfunnel.com/estate/index.html'
      }
    },
    created () {
      this.getCaptcha()
    },
    methods: {
      // 提交表单
      dataFormSubmit (e) {
        e.preventDefault()
        this.form.validateFields((err, res) => {
          if (!err) {
            var params = {
              'loginname': res.loginname,
              'password': res.password,
              'uuid': res.uuid,
              'captcha': res.captcha
            }
            console.log('----- log in传参 -----', params)
            this.$http({
              url: this.$http.adornUrl('/sys/login'),
              method: 'post',
              data: this.$http.adornData(params)
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$cookie.set('token', data.token)
                this.$router.replace({ name: 'memberhpr-leads' })
              } else {
                this.getCaptcha()
                this.$message.error(data.msg, 1)
              }
            })
          }
        })
      },
      // 获取验证码
      getCaptcha () {
        this.dataForm.uuid = getUUID()
        this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.dataForm.uuid}`)
      }
    }
  }
</script>

<style lang="less">
.loginpage {
  // header
  .header {
    height: 64px;
    background: #9EBACE;
    .box {
      height: 64px;
      .lpic {
        .pho {
          width: 270px;
          .im {
            width: 270px;
            height: 40px;
          }
        }
      }
      .rnav {
        .menu {
          border: none;
          background: none;
        }
      }
    }
  }

  // content
  .mainContent {
    .box {
      width: 100%;
      height: 950px;
      // 左 表单
      .infomation {
        padding-top: 147px;
        height: 100%;
        .info-content {
          max-width: 400px;
          margin: 0 auto;
          .logos {
            width: 270px;
            height: 40px;
            margin: 0 auto;
            margin-bottom: 60px;
          }
          .formbox {
            margin-bottom: 214px;
            .formItem {
              margin-bottom: 15px;
              &.yzmItem {
                margin-bottom: 60px;
              }
              .text {
                padding-left: 10px;
                font-size:12px;
                font-weight:bold;
                color:rgba(123,133,157,1);
              }
              .ipt {
                height:48px;
                background:rgba(243,246,253,1);
                border-radius:2px;
                outline: none;
                border: 0;
              }
              // 验证码
              .login-captcha {
                .pic {
                  width: 100%;
                  height: 48px;
                }
              }
              // 确认
              .login-btn-submit {
                width: 100%;
                height: 48px;
                line-height: 48px;
                text-align: center;
                background: rgba(24,144,255,1);
                border-radius: 2px;
                font-size:16px;
                font-weight:bold;
                color:rgba(255,255,255,1);
              }
            }
          
          }
          .rights {
            font-size: 12px;
            font-weight: bold;
            color: rgba(123,133,157,1);
            text-align: center;
            .pi {
              margin: 0;
            }
          }
         
        }
      
      }

      // 右 图
      .picture {
        height: 100%;
        .pho {
          width: 100%;
          height: 100%;
          background: url('~@/assets/img/login_bg.jpg') no-repeat center;
          background-size: cover;
        }
      }
    }
  }
}
</style>
